<template>
  <div>
    <div style="width:100%">
      <el-row type="flex" justify="space-between">
        <el-col :span="9">
          <el-input
            v-model="input"
            autofocus
            placeholder="请输入内容"
            style="width:200px;margin-left:10px;margin-right:10px"
            clearable
          />
          <el-button type="primary" @click="inquireData()">查询</el-button>
        </el-col>
        <el-col :span="7">
          <el-button type="success" style="margin-right:10px;" round @click="insertData()">增加</el-button>
          <el-button type="warning" style="margin-right:10px;" round @click="amendDatess">修改</el-button>
          <el-dialog width="25%" title="收货地址" :visible.sync="amendVisible" append-to-body>
            <template>
              <el-form ref="froms" :model="froms" label-width="80px">
                <el-form-item label="id:">
                  <el-input
                    v-model="froms.id"
                    placeholder="请输入内容"
                    style="width:200px;margin-left:10px;margin-right:10px"
                    :disabled="true"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="date:">
                  <el-input
                    v-model="froms.date"
                    autofocus
                    placeholder="请输入内容"
                    style="width:200px;margin-left:10px;margin-right:10px"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="name:">
                  <el-input
                    v-model="froms.name"
                    placeholder="请输入内容"
                    style="width:200px;margin-left:10px;margin-right:10px"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="city:">
                  <el-input
                    v-model="froms.city"
                    placeholder="请输入内容"
                    style="width:200px;margin-left:10px;margin-right:10px"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="site:">
                  <el-input
                    v-model="froms.site"
                    placeholder="请输入内容"
                    style="width:200px;margin-left:10px;margin-right:10px"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button @click="amendVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleFormConfirm('froms')">确定</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-dialog>
          <el-button type="danger" round @click="deleteDate()">删除</el-button>
          <el-button type="primary" round @click="updateDate()">更新</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width:100%"
        highlight-current-row
        @current-change="amendDate"
      >
        <el-table-column prop="id" label="Id" align="center" width="100px" />
        <el-table-column prop="date" label="日期" align="center" width="300px" />
        <el-table-column prop="name" label="姓名" align="center" width="250px" />
        <el-table-column prop="city" label="城市" align="center" width="250px" />
        <el-table-column prop="site" label="地址" align="center" width="400px" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      vals: [],
      from: {},
      froms: {
        id: '',
        date: '',
        name: '',
        city: '',
        site: ''
      },
      tableData: [],
      insertVisible: false,
      alterVisible: false,
      amendVisible: false,
      originlist: this.formtable()
    }
  },
  created: function() {
    this.tableData = this.formtable()
  },
  mounted() {
    this.from = { ...this.froms }
  },
  methods: {
    insertData() {
      // console.log(Object.assign(this.$options))
      // this.froms = { ...this.from }
      this.froms.id = this.tableData.length + 1
      this.insertVisible = true
      this.alterVisible = false
      this.amendVisible = true
    },
    amendDatess() {
      this.froms = Object.assign({}, this.vals)
      if (this.froms.id === undefined) {
        this.$alert('未选择任何数据，无法进行修改', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: '取消修改'
            })
          }
        })
      } else {
        this.insertVisible = false
        this.alterVisible = true
        this.amendVisible = true
      }
    },
    amendDate(val) {
      this.vals = val
    },
    updateDate() {
      this.tableData = this.originlist
      this.$message({
        type: 'success',
        message: '更新成功'
      })
    },
    deleteDate() {
      this.$confirm('是否进行删除', '提示', {
        confirmButtonText: '是的',
        cancelButtonText: '容我想想',
        type: 'warning'
      })
        .then(() => {
          this.tableData.forEach((itme, index) => {
            if (itme.id === this.vals.id) {
              this.tableData.splice(index, 1)
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    inquireData() {
      if (this.input === '') {
        this.tableData = this.originlist
      } else {
        var list = this.originlist.filter(
          (item) => item.name.indexOf(this.input) >= 0
        )
        this.tableData = list
        this.input = ''
      }
    },
    handleFormConfirm(fromsName) {
      if (this.alterVisible) {
        this.tableData.forEach((item, index) => {
          if (item.id === this.vals.id) {
            this.tableData.splice(index, 1, Object.assign({}, this.froms))
          }
        })
      } else if (this.insertVisible) {
        this.tableData.push(Object.assign({}, this.froms))
      }
      this.$refs[fromsName].resetFields()
      this.amendVisible = false
    },
    formtable: () => {
      return [
        {
          id: 1,
          date: '2018/4/3',
          name: '小写',
          city: '信阳',
          site: '河南信阳罗山铁铺'
        },
        {
          id: 2,
          date: '2018/4/3',
          name: '蕴蓄',
          city: '信阳',
          site: '河南信阳罗山铁铺'
        },
        {
          id: 3,
          date: '2018/4/3',
          name: '崇明',
          city: '信阳',
          site: '河南信阳罗山铁铺'
        },
        {
          id: 4,
          date: '2018/4/3',
          name: '浑噩',
          city: '信阳',
          site: '河南信阳罗山铁铺'
        }
      ]
    }
  }
}
</script>
